<template>
  <div class="panel panel-default">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="menubread">
      <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item >管理员</el-breadcrumb-item>
    </el-breadcrumb>
 <!--    <div class="panel-heading">
      欢迎您登录：管理员 <button id="button" @click="close">注销</button>
    </div>
    <div class="panel-body">
      <p>用户信息列表</p> 
    </div> -->
    <el-form class="forma"> 
    <el-form-item label="uid">
      <el-input class="small" v-model="uid" placeholder="请输入uid"></el-input>
      <el-button class="small1">查询</el-button>
    </el-form-item>
    </el-form>
    <table class="table" id="table">
      <tr>
        <td>uid</td>
        <td>uname</td>
        <td>upassword</td>
        <td>identity</td>
        <td>privilege</td>
        <td></td>
      </tr>
      <tr v-for="(value,index) in numa" :key="index" >   
         <td> {{Object.values((Object.values(dat))[0][index])[2]}} </td>
          <td> {{Object.values((Object.values(dat))[0][index])[3]}} </td>
           <td> {{Object.values((Object.values(dat))[0][index])[4]}} </td>
            <td> {{Object.values((Object.values(dat))[0][index])[0]}} </td>
            <td> {{Object.values((Object.values(dat))[0][index])[1]}} </td>
              <td> <button type="button" class="btn btn-default" @click="deleter()">
              删
            </button>
            <button type="button" class="btn btn-default" @click="modify()">
              改
            </button>
            <button type="button" class="btn btn-default" @click="deleteUser()">
              删除用户权限
            </button>
            <button type="button" class="btn btn-default" @click="addUser()">
              增加用户权限
            </button>
            </td>
      </tr> 
    </table>
  </div>
</template>
<script>
import $ from "jquery";
import {getUserAxios,addPrivilegeAxios,deleteAxios,deletePrivilegeAxios,logoutAxios} from "../../request/api"
export default {
  name: "maina",
  beforeCreate(){
    let json=""
    let thisa=this
    getUserAxios(json,thisa)
  },
  created(){
     
  },
  data() {
    return { 
      message: "123564",
      mes: "",
      data:{
        "success":"1"
      },
      uid:""
    };
  },
  computed:{
      dat(){
        return this.data
        },
      numa(){
        return Object.keys(this.data.success)
        },
  },
  methods: {
    setAuthor() {
      /* this.$store.state.author=this.mes; */
      this.$store.commit("newAuthor", this.mes);
    },
    addUser(event) {
       event = event || window.event;
      const tar =  event.tar || event.srcElement;
    
      const num1 = prompt("请输入你要增加权限几");
      let json = {
         "pid":Number(num1),
         "uid":Number(tar.parentNode.parentNode.children[0].innerText),
      }
     console.log(tar.parentNode.parentNode.children[0].innerText)
     addPrivilegeAxios(json);
    },
    deleteUser(event) {
       event = event || window.event;
      const tar =  event.tar || event.srcElement;
      console.log(tar)
      const num1 = prompt("请输入你要删除权限几");
      console.log(1111564456)
       let json = {
         "pid":Number(num1),
         "uid":Number(tar.parentNode.parentNode.children[0].innerText),
      }
      console.log(json)
      console.log(tar.parentNode.parentNode.children[0].innerText)
     
    
      deletePrivilegeAxios(json)
    },
    deleter(event) {
      event = event || window.event;
      const tar = event.tar || event.srcElement;
      console.log(tar);
      console.log(tar.parentNode);
      const tr = document.getElementsByTagName("table")[0];
      console.log(tr);
      console.log(tar.parentNode.parentNode)
      if (confirm("确定要删除该项吗"))
      tr.removeChild(tar.parentNode.parentNode);
      console.log("115648463")
      console.log(tar.parentNode.parentNode.children[0].innerText)
      let json ={"uid":Number(tar.parentNode.parentNode.children[0].innerText)};
    
      let thisa=this;
      deleteAxios(json,thisa) 
      console.log(123546);
     console.log(Object.keys(this.data.success))
     
    },
    modify(event) {
      event = event || window.event;
     let  tar = event.tar || event.srcElement;
      console.log(tar)
      let num=(tar.parentNode.parentNode.children[0].innerText);
      console.log((tar.parentNode.parentNode.children[0]));
      this.$store.commit("setModify",Number(num))
      this.$router.push("/modify");
    },
    close() {
      let thisa=this;
      logoutAxios(thisa)
     
    },
  },
};
</script>
<style scoped>
table {
  border-collapse: collapse;
}
table tr td {
  border: 1px solid #ccc;
  color:black
}
table tr td {
  padding: 5px 10px;
}
#button {
  float: right;
  margin: 0px 80px 0px 0px;
}
.menubread{
    font-size: 30px;
    margin: 20px;
}
.small{
  width:300px;
  float: left;
}
.small1{
  width:100px;
  float: left;
}
.forma{
  margin: 0px 0px 0px 20px;
}
</style>